<template>
  <div id="home" class="aa">
    <!--走马灯-->
     <div class="block">
    <span class="demonstration"></span>
    <el-carousel height="340px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
 




    <div class="current">
      <div class="title">截至1月8日18时00分</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epdmic.currentData"
            :key="index"
            :span="8"
          >
            <div class="currentBg">
              <div class="colorDiv1">昨日↑{{ item.n }}</div>
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="tableDiv">
      <div class="title">国内病例</div>
      ``
      <el-table
        :header-cell-style="cellClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="province"
          label="地区"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="confirmed"
          label="现有确诊"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="suspected"
          label="累计确诊"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="dead"
          label="累计治愈"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cure"
          label="累计死亡"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="outside"
          label="境外输入"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="severe"
          label="新增重症"
        ></el-table-column>
      </el-table>
    </div>

    <div class="articleDiv">
      <div class="title">最新进展</div>
      <div class="content">
        <!-- 列表展示区域 -->
        <div class="contentList">
          <div
            @click="
              currentArticle = item;
              dialogVisible = true;
            "
            v-for="(item, index) in listData"
            :key="item.id"
          >
            <div class="listHeader">
              <div class="circle"></div>
              <el-tag v-if="index == 0" size="mini" type="success" effect="dark"
                >最新</el-tag
              >
              <span>{{
                moment(item.publishTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <div class="listContent">{{ item.title }}</div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="contentPage">
          <el-pagination
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      :title="currentArticle.title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div>
        {{ moment(currentArticle.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <!-- v-html可以将代码片段字符串设置到内部内容区 -->
      <span class="imgWidth" v-html="currentArticle.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
  
      dialogVisible: false,
      // 当前查看内容的资讯对象
      currentArticle: {},
      // 最新进展数据
      listData: [],
      // 进展数据总数
      total: 0,
      // 分页参数
      pageParam: {
        page: 1,
        pageSize: 10,
        categoryId: 3,
      },
      // 国内病例数据
      tableData: [],
      // 当天时间 new Date()
      currentTime: this.moment(new Date()).format("M月D日"),
      // 当天疫情数据和历史疫情数据
      epdmic: {
        currentData: [
          {
            n: 0,
            name: "新增确诊",
            num: this.getRandom(0, 5),
          },
          {
            n: 89,
            name: "累计确诊",
            num: this.getRandom(97000, 98000),
          },
          {
            n: 82,
            name: "累计治愈",
            num: this.getRandom(91000, 92000),
          },
          {
            n: 0,
            name: "现有疑似",
            num: this.getRandom(0, 5),
          },
          {
            n: 0,
            name: "累计死亡",
            num: this.getRandom(4700, 4850),
          },
          {
            n: 7,
            name: "现有确诊",
            num: this.getRandom(1000, 1500),
          },
          {
            n: 0,
            name: "现有重症",
            num: this.getRandom(5, 15),
          },
          {
            n: 57,
            name: "无症状感染者",
            num: this.getRandom(400, 500),
          },
          {
            n: 16,
            name: "境外输入",
            num: this.getRandom(4000, 4500),
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    moment,
    // 当前页发生变化
    currentChange(val) {
      this.pageParam.page = val;
      this.findArticle();
    },
    // 分页获取最新进展的资讯信息
    async findArticle() {
      let res = await axios.get("/article/pageQuery", {
        params: this.pageParam,
      });
      this.listData = res.data.list;
      this.total = res.data.total;
    },
    // 表格表头列背景
    cellClass({ columnIndex }) {
      // columnIndex是列索引，从0开始
      let color = "#7171eb";
      if (columnIndex == 1) color = "#db5349";
      if (columnIndex == 2) color = "#ffb751";
      if (columnIndex == 3) color = "rgb(255, 81, 110) ";
      if (columnIndex == 4) color = "#71f734";
      if (columnIndex == 5) color = "#919191";
      if (columnIndex == 6) color = "#3da7fd";
      return {
        color: color,
        backgroundColor: "#efefef",
        height: "60px",
      };
    },
    getRandom(num1, num2) {
      //40-200    0-160 + 40
      return Math.round(Math.random() * (num2 - num1) + num1);
    },
  },
  async created() {
    this.findArticle();
    let res = await axios.get("/epidemic/pageQuery", {
      params: { page: 1, pageSize: 20 },
    });
    this.tableData = res.data.list;
  },
};
</script>

<style scoped>
.home {
  color: #70cbf1;
}
.currentBg {
  background-color: #eefaff;
  height: 100px;
  border-radius: 5px;
  /* 上下 左右 */
  padding: 20px 0;
  /* 设置 height为整个容器的高度 */
  box-sizing: border-box;
  text-align: center;
  line-height: 20px;
  /* 字体大小 */
  font-size: 14px;
  /* 字体加粗 */
  font-weight: bold;
  margin: 5px;
}
.historyBg {
  background-color: #fbf5ef;
}
.colorDiv {
  color: coral;
}
.colorDiv1 {
  color: rgb(80, 112, 255);
}
.title {
  color: rgb(138, 135, 135);
  margin: 2px;
}
.contentList {
  background-color: #f8f8f8;
  padding: 20px;
}
.listHeader > * {
  margin-right: 3px;
}
.listHeader > span:last-child {
  position: relative;
  top: 1px;
  font-size: 14px;
}
.circle {
  width: 10px;
  height: 10px;
  background-color: rgb(253, 57, 57);
  display: inline-block;
  border-radius: 50%;
}
.listContent {
  padding: 16px;
  border-radius: 5px;
  color: #666;
  background-color: #fff;
  margin-top: 5px;
  font-size: 15px;
  margin-bottom: 10px;
}
/* 走马灯样式 */
.carousel-form {
  width: 1000px;
  margin-top: 30px;
  margin-left: 110px;
  border-radius: 10px;
  /* 边框*/
  border: 2px solid rgba(0, 255, 255, 0.555);
  /*浮动 */
  /*  float: left; */
}
/* 设定走马灯样式 */
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
      background: url("../utils/003.jpg") no-repeat;
   
 /* background: url("../utils/002.jpg") no-repeat;*/
    
    background: url("../utils/004.jpg") no-repeat;
 
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
     
       background: url("../utils/001.jpg") no-repeat;
  }

/* 设置v-html字符串图片样式 */
 .imgWidth img {
  width: 100%;
}
</style>